<template>
	<view class="main-page">
		<u-navbar :placeholder="true" title="订单详情" :autoBack="true"></u-navbar>
		<view class="container">
			<view class="steps-content">
				<u-steps :current="detail.state" active-color="#fdca00">
					<u-steps-item title="已下单"></u-steps-item>
					<u-steps-item title="已确认"></u-steps-item>
					<u-steps-item title="生产中"></u-steps-item>
					<!-- <u-steps-item title="运输中"></u-steps-item> -->
					<u-steps-item title="已完成"></u-steps-item>
				</u-steps>
			</view>
			<view class="card">
				<view class="card-header">
					订单详情
				</view>
				<view class="card-content">
					<view class="content">
						<view class="content-item">
							<text class="label">订单类型：</text>
							<text class="value">{{Enums.OrderType[detail.type]}}</text>
						</view>
						<view class="content-item">
							<text class="label">款号：</text>
							<text class="value">{{detail.product_no}}</text>
						</view>
						<view class="content-item">
							<text class="label">数量：</text>
							<text class="value">{{detail.num}}</text>
						</view>
						<view class="content-item">
							<text class="label">类型：</text>
							<text class="value">{{detail.productCategory ? detail.productCategory.title : ''}}</text>
						</view>
						<view class="content-item">
							<text class="label">备注：</text>
							<text class="value">{{detail.remark}}</text>
						</view>
						<view class="content-item">
							<text class="label">总额：</text>
							<text class="value price">￥{{detail.amount}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-header">
					印花位置
				</view>
				<view class="card-content">
					{{detail.img_position}}
				</view>
			</view>
			<view class="card">
				<view class="card-header">
					转色说明
				</view>
				<view class="card-content">
					{{detail.color_remark}}
				</view>
			</view>
			<view class="card">
				<view class="card-header">
					注意事项
				</view>
				<view class="card-content">
					{{detail.tips}}
				</view>
			</view>
			<view class="card">
				<view class="card-header">
					图片
				</view>
				<view class="card-content">
					<u-album :urls="detail.images" ></u-album>
				</view>
			</view>
		</view>
		<!-- <template v-if="detail.pay_state != 2">
			<view class="fixed-place"></view>
			<view class="fixed">
				<view class="text">
					订单金额：{{detail.amount}}
				</view>
				<view class="btns">
					<u-button shape="circle" size="small" type="primary" text="支付"></u-button>
				</view>
			</view>
		</template> -->
	</view>
</template>

<script>
	import { getOrderDetail } from '@/common/api.js';
	import { fileUrl } from '@/common/config.js';
	
	export default {
		data() {
			return {
				no: '',
				detail: {}
			}
		},
		onLoad(params) {
			this.no = params.order_no;
			this.getDetail();
		},
		methods: {
			getDetail(){
				getOrderDetail({no: this.no}).then(res => {
					let images = [];
					res.images.forEach(item => {
						if(item.indexOf('http') > -1){
							images.push(item);
						} else {
							images.push(fileUrl+item);	
						}
					})
					console.log('images', images);
					res.images = images
					this.detail = res
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 20rpx; font-size: 28rpx;
		.steps-content {
			padding: 40rpx 20rpx 20rpx 20rpx;
			/deep/ .u-steps-item__wrapper { background-color: #f7f8fb; }
		}
		.card {
			background-color: #fff; border-radius: 10px; margin-top: 20rpx; padding-bottom: 30rpx; overflow: hidden;
			.card-header {
				padding: 20rpx 20rpx 20rpx 30rpx; font-size: 30rpx; background-image: linear-gradient(rgba(253, 202, 0, .1), rgba(255, 255, 255, 1)); color: #333;
				position: relative;
				&::before { content: " ";background-color: #fdca00; width: 10rpx; height: 25rpx;display: inline-block;position: absolute; top: 30rpx; left: 15rpx;border-radius: 5rpx;}
			}
			.card-content {
				padding: 10rpx 20rpx; color: #444959;
				.price { color: red; font-size: 32rpx;}
				.content {
					padding: 10rpx;
					.content-item {
						display: flex; 
						.label { color: #90939c; padding-right: 10rpx; white-space: nowrap;}
						.value { color: #444959; }
					}
					.content-item + .content-item {
						padding-top: 15rpx;
					}
				}
			}
		}
	}
	.fixed-place { height: 100rpx;  }
	.fixed { 
		position: fixed; bottom: 0; left:0; right:0; background-color: #fff; display: flex; justify-content: space-between; padding: 20rpx; align-items: center; box-shadow:0px 0 15px 0px rgba(0, 0, 0, .1);
		.text { font-size: 28rpx; }
	}
</style>
